<script setup>
import {onMounted, ref} from 'vue';
import * as echarts from 'echarts'


let isOpenWin = ref(false);

function openWin() {
  isOpenWin.value = true;
}

onMounted(() => {
  let option = {
    xAxis: {
      type: 'category',
      data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        type: 'line',
        data: [11, 31, 75, 25, 16]
      }
    ]
  }

  let option2 = {
    xAxis: {
      type: 'category',
      data: ['A', 'B', 'C', 'D', 'E']
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        type: 'bar',
        data: [11, 31, 75, 25, 16]
      }
    ]
  }

  let option3 = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '80%',
        left: "100px",
        top: "0px",
        data: [
          {value: 1048, name: 'Search Engine'},
          {value: 735, name: 'Direct'},
          {value: 580, name: 'Email'},
          {value: 484, name: 'Union Ads'},
          {value: 300, name: 'Video Ads'}
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  //
  // const myChart = echarts.init(document.getElementById('chart'));
  // myChart.setOption(option);
  //
  // const myChart2 = echarts.init(document.getElementById('chart2'));
  // myChart2.setOption(option2);
  //
  // const myChart3 = echarts.init(document.getElementById('chart3'));
  // myChart3.setOption(option3);
  //
  //

})
</script>

<template>
  <a-modal v-model:open="isOpenWin" title="添加新业绩" :footer="null" width="930px">
    <div style="height: 525px;overflow-y: auto;overflow-x: hidden">

    </div>
  </a-modal>

  <a-row style="height: 100%;" :gutter="[10,10]">
    <a-col :span="18">
      <a-row :gutter='[10, 10]' style="height: 100%;">
        <a-col :span="12">
          <a-card title="年度个人业绩明细" style="height:300px">

          </a-card>
        </a-col>
        <a-col :span="12" >
          <a-card title="个人业绩组成一览" style="height: 300px">

          </a-card>
        </a-col>
        <a-col :span="24" style="height: calc(100% - 310px)">
          <a-card title="年度个人业绩明细" style="height: 100%">
            <template #extra>
              <a-button type="primary" @click="openWin">添加新业绩</a-button>
            </template>
            <div style="overflow-x: hidden;overflow-y: auto">
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-col>

    <a-col :span="6" >
      <a-card title="院级统计排名" style="height: 100%">

      </a-card>
    </a-col>
  </a-row>
</template>

<style scoped>
</style>